import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 使用系统默认字体以确保跨平台兼容性
        // fontFamily: 'Microsoft YaHei',
        scaffoldBackgroundColor: Colors.grey[300],
      ),
      home: const MainPage(),
    );
  }
}

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        // 检查屏幕宽度是否大于600像素
        if (constraints.maxWidth > 600) {
          // 大屏幕：使用永久侧边栏
          return Row(
            children: [
              // 侧边导航栏
              SizedBox(
                width: 250,
                child: Drawer(
                  shape: const BeveledRectangleBorder(
                    borderRadius: BorderRadius.zero,
                  ),
                  child: ListView(
                    padding: EdgeInsets.zero,
                    children: [
                      const DrawerHeader(
                        decoration: BoxDecoration(
                          color: Colors.blue,
                        ),
                        child: Text(
                          'X App',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 24,
                          ),
                        ),
                      ),
                      ListTile(
                        leading: const Icon(Icons.home),
                        title: const Text('主页'),
                        onTap: () {
                          // 在大屏幕上不需要关闭导航栏
                        },
                      ),
                      ListTile(
                        leading: const Icon(Icons.settings),
                        title: const Text('设置'),
                        onTap: () {
                          // 在大屏幕上不需要关闭导航栏
                        },
                      ),
                      ListTile(
                        leading: const Icon(Icons.info),
                        title: const Text('关于'),
                        onTap: () {
                          // 在大屏幕上不需要关闭导航栏
                        },
                      ),
                    ],
                  ),
                ),
              ),
              // 主内容区域
              Expanded(
                child: Scaffold(
                  appBar: AppBar(
                    title: const Text('X App'),
                    backgroundColor: Colors.grey[300],
                  ),
                  body: const Stack(
                    children: [
                      // 天气时间展示卡片放在左上角
                      Positioned(
                        top: 20,
                        left: 20,
                        child: WeatherTimeCard(),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          );
        } else {
          // 小屏幕：使用抽屉式导航栏
          return Scaffold(
            appBar: AppBar(
              title: const Text('X App'),
              backgroundColor: Colors.grey[300],
            ),
            drawer: Drawer(
              shape: const BeveledRectangleBorder(
                borderRadius: BorderRadius.zero,
              ),
              child: ListView(
                padding: EdgeInsets.zero,
                children: [
                  const DrawerHeader(
                    decoration: BoxDecoration(
                      color: Colors.blue,
                    ),
                    child: Text(
                      'X App',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 24,
                      ),
                    ),
                  ),
                  ListTile(
                    leading: const Icon(Icons.home),
                    title: const Text('主页'),
                    onTap: () {
                      Navigator.pop(context);
                    },
                  ),
                  ListTile(
                    leading: const Icon(Icons.settings),
                    title: const Text('设置'),
                    onTap: () {
                      Navigator.pop(context);
                    },
                  ),
                  ListTile(
                    leading: const Icon(Icons.info),
                    title: const Text('关于'),
                    onTap: () {
                      Navigator.pop(context);
                    },
                  ),
                ],
              ),
            ),
            body: const Stack(
              children: [
                // 天气时间展示卡片放在左上角
                Positioned(
                  top: 20,
                  left: 20,
                  child: WeatherTimeCard(),
                ),
              ],
            ),
          );
        }
      },
    );
  }
}

class WeatherTimeCard extends StatefulWidget {
  const WeatherTimeCard({super.key});

  @override
  State<WeatherTimeCard> createState() => _WeatherTimeCardState();
}

class _WeatherTimeCardState extends State<WeatherTimeCard> {
  String currentTime = '';
  String currentWeather = '晴';
  String currentTemp = '25°C';

  @override
  void initState() {
    super.initState();
    // 不在initState中直接调用依赖context的方法
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _updateTime();
  }

  void _updateTime() {
    setState(() {
      currentTime = TimeOfDay.now().format(context);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Card(
      color:
          Colors.white.withValues(alpha: 0.9), // 使用withValues替换已弃用的withOpacity
      elevation: 4,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(12),
      ),
      child: Container(
        width: 150,
        padding: const EdgeInsets.all(16),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              currentTime,
              style: const TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 8),
            const Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(
                  Icons.wb_sunny,
                  color: Colors.orange,
                  size: 24,
                ),
                SizedBox(width: 8),
                Text(
                  '25°C, 晴',
                  style: TextStyle(
                    fontSize: 14,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
